import { Component, OnInit } from '@angular/core';
import {PageSubject} from "../../../../util/page-subject";
import {ResponseUtil} from "../../../../util/response-util";
import {OneDialogService} from "../../../../widgets/one-dialog/one-dialog.service";
import {ExamineService} from "./examine.service";
import {MsgConstants} from "../../../../constants/constants";
import {MsgResult} from "../../../../models/msg-result";
import {Path} from "../../../../portal/admin/admin-breadcrumb/breadcrumb";
import {Examine} from "./examine";

declare var $;
declare var moment;
declare var echarts;

@Component({
  selector: 'app-examine',
  templateUrl: './examine.component.html',
  styleUrls: ['./examine.component.css']
})
export class ExamineComponent implements OnInit {

  /**
   * 声明实例
   */
  cityData;
  areaData;
  examine : Examine;
  targetChartYear;
  targetChartMonth;
  constructor(
    private pageSubject : PageSubject,
    private responseUtil: ResponseUtil,
    private dialogService: OneDialogService,
    private examineService: ExamineService
  ) {
    this.initObject();
  }
  ngOnInit() {
    this.pushPage();
    this.initTargetChart();
    this.targetGoalData();
    this.targetChartData();
  }
  /**
   * 面包屑导航
   */
  pushPage() {
    let path = new Path("总览", "");
    this.pageSubject.pushPage("空气质量目标", "", path);
  }
  initTargetChart(){
    this.targetChartYear = echarts.init(document.getElementById('target_chart1'));
    this.targetChartMonth = echarts.init(document.getElementById('target_chart2'));
    let targetOption1 = {
      tooltip : {
        formatter: "{a} <br/>{b} : 本月{c}月"
      },
      title:{
        text:"优良天数",
        top:"bottom",
        right:55,
        textStyle:{
          fontWeight:"normal",
          fontSize:"14",
          fontFamily:"微软雅黑",
          color:"#333"
        }
      },
      series: [
        {
          name: '优良天数',
          type: 'gauge',
          z: 3,
          min: 0,
          startAngle:240,
          endAngle:-60,
          splitNumber: 1,
          radius: '90%',
          axisTick: {            // 坐标轴小标记
            splitNumber:12,
            length:16
          },
          splitLine: {
            length:8
          },
          axisLabel: {
            distance:10,
            textStyle:{
              color:"#82CAAE"
            }
          },
          silent:true,
          detail : {
            show:false
          },
          pointer:{
            width:4
          },
          itemStyle:{
            normal:{
              color:"#82CAAE"
            }
          },
          title : {
            offsetCenter:[0,"30%"],
            textStyle: {
              fontWeight: 'bolder',
              fontSize: 20
            }
          },
          data:[]
        }
      ]
    };
    this.targetChartYear.setOption(targetOption1);
    let targetOption2 = {
      tooltip : {
        formatter: "{a} <br/>{b} : 本月{c}月"
      },
      title:{
        text:"优良天数",
        top:"bottom",
        right:55,
        textStyle:{
          fontWeight:"normal",
          fontSize:"14",
          fontFamily:"微软雅黑",
          color:"#333"
        }
      },
      series: [
        {
          name: '优良天数',
          type: 'gauge',
          z: 3,
          min: 0,
          startAngle:240,
          endAngle:-60,
          splitNumber: 1,
          radius: '90%',
          axisTick: {            // 坐标轴小标记
            splitNumber:12,
            length:16
          },
          splitLine: {
            length:8
          },
          axisLabel: {
            distance:10,
            textStyle:{
              color:"#82CAAE"
            }
          },
          silent:true,
          detail : {
            show:false
          },
          pointer:{
            width:4
          },
          itemStyle:{
            normal:{
              color:"#82CAAE"
            }
          },
          title : {
            offsetCenter:[0,"30%"],
            textStyle: {
              fontWeight: 'bolder',
              fontSize: 20
            }
          },
          data:[]
        }
      ]
    };
    this.targetChartMonth.setOption(targetOption2);
  }
  /**
   * 实例化对象
   */
  private initObject() {
    this.examine = new Examine(moment().format("M"),moment().year(),"","","","","","","","","","","","","","","","","","","","","","",moment().year(),moment().format("M"),1);
  }

  /**
   * 查询
   */
  search(){
    $("#cityData").show().siblings().hide();
    this.examine.yearData = $("#statisticYear").val();
    this.examine.monthData = $("#statisticMonth").val();
    this.targetGoalData();
    this.targetChartData();
  }
  /**
   * 考核目标
   */
  targetGoalData(){
    this.examineService.getTargetGoal(this.examine.yearData,this.examine.monthData).subscribe(
      result => this.responseUtil.success(result,this.targetGoalDataResult),
      message => this.responseUtil.error(message)
    );
  }
  private targetGoalDataResult = (result: MsgResult) => {
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.targetGoalShow(result.data)
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  }
  targetGoalShow = (data) =>{
    let yearDone = data.yearGoalData.yFineDays.done || "-";
    let yearGoal = data.yearGoalData.yFineDays.goal || "-";
    let monthDone = data.monthGoalData.mFineDays.done || "-";
    let monthGoal = data.monthGoalData.mFineDays.goal || "-";
    this.examine.mPM10Done = data.monthGoalData.mPM10.done || "-";
    this.examine.mPM10Goal = data.monthGoalData.mPM10.goal || "-";
    this.examine.mPM25Done = data.monthGoalData.mPM25.done || "-";
    this.examine.mPM25Goal = data.monthGoalData.mPM25.goal || "-";
    this.examine.yPM10Done = data.yearGoalData.yPM10.done || "-";
    this.examine.yPM10Goal = data.yearGoalData.yPM10.goal || "-";
    this.examine.yPM25Done = data.yearGoalData.yPM25.done || "-";
    this.examine.yPM25Goal = data.yearGoalData.yPM25.goal || "-";

    let mPM10 = this.compareData(this.examine.mPM10Done,this.examine.mPM10Goal);
    this.examine.mPM10Class = mPM10[0];
    this.examine.mPM10DoneHeight = mPM10[1];
    this.examine.mPM10GoalHeight = mPM10[2];


    let mPM25 = this.compareData(this.examine.mPM25Done,this.examine.mPM25Goal);
    this.examine.mPM25Class = mPM25[0];
    this.examine.mPM25DoneHeight = mPM25[1];
    this.examine.mPM25GoalHeight = mPM25[2];

    let yPM10 = this.compareData(this.examine.yPM10Done,this.examine.yPM10Goal);
    this.examine.yPM10Class = yPM10[0];
    this.examine.yPM10DoneHeight = yPM10[1];
    this.examine.yPM10GoalHeight = yPM10[2];

    let yPM25 = this.compareData(this.examine.yPM25Done,this.examine.yPM25Goal);
    this.examine.yPM25Class = yPM25[0];
    this.examine.yPM25DoneHeight = yPM25[1];
    this.examine.yPM25GoalHeight = yPM25[2];

    let yearDonePer = yearDone == "-"?0:yearDone;
    let yearGoalPer = yearGoal == "-"?1:yearGoal;
    let monthDonePer = monthDone == "-"?0:monthDone;
    let monthGoalPer = monthGoal == "-"?1:monthGoal;
    let targetOption1 = {
      series: [
        {
          name: '优良天数',
          type:"gauge",
          max: yearGoal,
          axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
              width: 16,
              color:[[yearDonePer/yearGoalPer,"#D2D3D2"],[1,"#82CAAE"]]
            }
          },
          data:[{value:yearDone,name:yearDone+"/"+yearGoal}]
        }
      ]
    };
    this.targetChartYear.setOption(targetOption1);
    let targetOption2 = {
      series: [
        {
          name: '优良天数',
          type:"gauge",
          max: monthGoal,
          axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
              width: 16,
              color:[[monthDonePer/monthGoalPer,"#D2D3D2"],[1,"#82CAAE"]]
            }
          },
          data:[{value:monthDone,name:monthDone+"/"+monthGoal}]
        }
      ]
    };
    this.targetChartMonth.setOption(targetOption2);
    console.log(targetOption1);
    console.log(targetOption2);
  };
  compareData = (data1,data2) =>{
    let dataClass = " ";
    let doneHeight = " ";
    let goalHeight = " ";
    if(data1>data2){
      dataClass ="one-progress-bar-now-bed";
      doneHeight = "70%";
      goalHeight = data2/data1*70+"%";
    }else{
      dataClass ="one-progress-bar-now-good";
      doneHeight = data1/data2*70+"%";
      goalHeight = "70%";
    }
    return [dataClass,doneHeight,goalHeight];
  }
  /**
   * 优良天数&&PM10&&PM25
   */
  targetChartData(){
    this.examineService.getTargetChart(this.examine.yearData,this.examine.monthData).subscribe(
      result => this.responseUtil.success(result, this.targetChartResult),
      message => this.responseUtil.error(message)
    )
  }
  private targetChartResult = (result:MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.targetChartShow(result.data)
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  }
  targetChartShow(data){
    this.examine.areaName = data.areaName;
    this.examine.cityName = data.cityName;
    this.cityData = data.cityData;
    this.cityData.xAxisData = data.cityData.areaList;
    this.targetChart(this.cityData,"cityData");
    if(data.areaName){
      $("#areaData").show().find("[id^=areaData]").html("");
      this.areaData = data.areaData;
      this.areaData.xAxisData = data.areaData.timeList;
      this.targetChart(this.areaData,"areaData");
      $("#areaData").hide();
    }
  }
  targetChart = (chartData,dataType) => {
    // 优良天数目标及完成情况
    if(chartData.dataList.fineDayData != null){
      // $("#"+dataType+"FineDayChart").css("width",$(window.innerWidth)[0]-300+"px");
      let fineDayChart = echarts.init(document.getElementById(dataType+'FineDayChart'));
      let fineDayOption= {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data:[chartData.name.goal, chartData.name.done]
        },
        xAxis: {
          type: 'category',
          nameGap:"20",
          name: "日期",
          nameLocation:"start",
          splitLine: {
            show: false
          },
          axisTick: {
            alignWithLabel:true
          },
          data: chartData.xAxisData
        },
        yAxis: {
          name: "指数",
          type: 'value',
          splitLine: {
            show: false
          }
        },
        series: [{
          name: chartData.name.goal,
          type: 'bar',
          symbolSize:6,
          smooth: true,
          barWidth:"20",
          data: chartData.dataList.fineDayData.fineDayGoal,
          label:{
            normal:{
              show:true,
              position:"top"
            }
          },
          itemStyle:{
            normal:{
              color:"#81C8AC"
            }
          }
        },{
          name: chartData.name.done,
          type: 'bar',
          symbolSize:6,
          barWidth:"20",
          smooth: true,
          data:  chartData.dataList.fineDayData.fineDayDone,
          label:{
            normal:{
              show:true,
              position:"top"
            }
          },
          itemStyle:{
            normal:{
              color:"#944B4A"
            }
          }
        }]
      };
      fineDayChart.setOption(fineDayOption);
    }else{
      $("#"+dataType+"FineDayChart").html("暂无数据");
    }

//   PM10目标及完成情况
    if(chartData.dataList.PM10Data != null){
      // $("#"+dataType+"PM10Chart").show().css("width",$(window.innerWidth)[0]-300+"px");
      let PM10Chart = echarts.init(document.getElementById(dataType+'PM10Chart'));
      // $("#"+dataType+"PM10Chart").css("width",$(window.innerWidth)[0]-120+"px");
      let PM10Option= {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data:[chartData.name.goal, chartData.name.done]
        },
        xAxis: {
          type: 'category',
          nameGap:"20",
          name: "日期",
          nameLocation:"start",
          splitLine: {
            show: false
          },
          axisTick: {
            alignWithLabel:true
          },
          data: chartData.xAxisData
        },
        yAxis: {
          name: "指数",
          type: 'value',
          splitLine: {
            show: false
          }
        },
        series: [{
          name: chartData.name.goal,
          type: 'bar',
          symbolSize:6,
          smooth: true,
          barWidth:"20",
          label:{
            normal:{
              show:true,
              position:"top"
            }
          },
          data: chartData.dataList.PM10Data.PM10Goal,
          itemStyle:{
            normal:{
              color:"#829BC8"
            }
          }
        },{
          name: chartData.name.done,
          type: 'bar',
          symbolSize:6,
          barWidth:"20px",
          smooth: true,
          label:{
            normal:{
              show:true,
              position:"top"
            }
          },
          data: chartData.dataList.PM10Data.PM10Done,
          itemStyle:{
            normal:{
              color:"#944B4A"
            }
          }
        }]
      };
      PM10Chart.setOption(PM10Option);
    }else{
      $("#"+dataType+"PM10Chart").html("暂无数据");
    }

//    PM25目标及完成情况
    if(chartData.dataList.PM25Data != null){
      // $("#"+dataType+"PM25Chart").show().css("width",$(window.innerWidth)[0]-300+"px");
      let PM25Chart = echarts.init(document.getElementById(dataType+'PM25Chart'));
      let PM25Option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data:[chartData.name.goal, chartData.name.done]
        },
        xAxis: {
          type: 'category',
          nameGap:"20",
          name: "日期",
          nameLocation:"start",
          splitLine: {
            show: false
          },
          axisTick: {
            alignWithLabel:true
          },
          data:  chartData.xAxisData
        },
        yAxis: {
          name: "指数",
          type: 'value',
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: chartData.name.goal,
            type: 'bar',
            symbolSize:6,
            smooth: true,
            barWidth:"20",
            label:{
              normal:{
                show:true,
                position:"top"
              }
            },
            data: chartData.dataList.PM25Data.PM25Goal,
            itemStyle:{
              normal:{
                color:"#82B8D6"
              }
            }
          },{
            name: chartData.name.done,
            type: 'bar',
            symbolSize:6,
            barWidth:"20",
            smooth: true,
            label:{
              normal:{
                show:true,
                position:"top"
              }
            },
            data: chartData.dataList.PM25Data.PM25Done,
            itemStyle:{
              normal:{
                color:"#944B4A"
              }
            }
          }
        ]
      };
      PM25Chart.setOption(PM25Option);
    }else{
      $("#"+dataType+"PM25Chart").html("暂无数据");
    }
  }
  /**
   * 按钮点击
   */
  clickFunction(type){
    this.examine.activeState = type == "area"?0:1;
    $("#"+type+"Data").show().siblings().hide();
  }
  /**
   * 日期改变
   */
  changeDate(type){
    let chooseYear = $("#statisticYear").val();
    console.log(chooseYear);
    if(chooseYear == this.examine.nowYear && type == "year"){
      $("#statisticMonth").val() > (new Date().getMonth()+1) && $("#statisticMonth").val(new Date().getMonth()+1);
      this.examine.nowMonth = new Date().getMonth()+1;
    }
    chooseYear != this.examine.nowYear && (this.examine.nowMonth = 12);
    console.log(this.examine);
  }
}
